<script setup>
	import {
		ref
	} from "vue"
	import nuni from '../../static/utils/request.js'
	import useBP from '@/hooks/badgeProblem.js'
	useBP()
	//-- 轮播图相关
	const swiperList = ref([])
	const getSwiperList = async () => {
		const {
			data: res
		} = await nuni.request({
			url: '/api/public/v1/home/swiperdata',
		});
		if (res.meta.status != 200)
			return nuni.$showMsg()
		swiperList.value = res.message
	}
	getSwiperList()
	//-- 导航相关
	const navList = ref([])
	const getNavList = async () => {
		const {
			data: res
		} = await nuni.request({
			url: '/api/public/v1/home/catitems'
		})
		if (res.meta.status != 200)
			return nuni.$showMsg()
		navList.value = res.message
	}
	getNavList()
	// 点击跳转
	const dealNavClick = ({
		name
	}) => {
		if (name === '分类') {
			uni.switchTab({
				url: '/pages/cate/cate'
			})
		}
	}
	// --楼层相关
	const floorList = ref([])
	const getFloorList = async () => {
		const {
			data: res
		} = await nuni.request({
			url: '/api/public/v1/home/floordata'
		})
		if (res.meta.status != 200) return nuni.$showMsg()
		// 对数据中的错误进行处理
		res.message.forEach(f =>
			f.product_list.forEach(p => (p.nUrl = "/subpkg/goods_list/goods_list?" + p.navigator_url.split(
				"?")[1]))
		)
		floorList.value = res.message
	}
	getFloorList()
	// 点击搜索事件相关业务
	const gotoSearch = e => {
		uni.navigateTo({
			url: '/subpkg/search/search'
		})
	}
</script>


<template>
	<!-- 搜索区域 -->
	<view class="search-box">
		<my-search @click="gotoSearch"></my-search>
	</view>
	<!-- 轮播图区域 -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
		<swiper-item v-for="(ele,idx) in swiperList" :key="idx">
			<navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${ele.goods_id}`">
				<image :src="ele.image_src" mode=""></image>
			</navigator>
		</swiper-item>
	</swiper>
	<!-- 导航区域 -->
	<view class="nav-list">
		<view class="nav-item" v-for="(ele, idx) in navList" :key="idx" @click="dealNavClick(ele)">
			<image :src="ele.image_src" mode="" class="nav-img"></image>
		</view>
	</view>
	<!-- 楼层区域 -->
	<view class="floor-list">
		<view class="floor-item" v-for="(ele,idx) in floorList" :key="idx">
			<image :src="ele.floor_title.image_src" mode="" class="floor-title"></image>
			<!-- 楼层内容 -->
			<view class="floor-img-box">
				<navigator class="left" :url="ele.product_list[0].nUrl">
					<image :src="ele.product_list[0].image_src" mode="widthFix"
						:style="{width:ele.product_list[0].image_width+'rpx'}"></image>
				</navigator>
				<view class="right">
					<navigator class="rigth-img-item" v-for="(e2, i2) in ele.product_list" :key="i2" :url="e2.nUrl">
						<image :src="e2.image_src" mode="widthFix" v-if="i2" :style="{width:e2.image_width+'rpx'}">
						</image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>


<style lang="scss">
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.nav-img {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.floor-title {
		width: 100%;
		height: 60rpx;
	}

	.floor-list {
		padding: 14rpx;
	}

	.floor-img-box {
		display: flex;
		justify-content: space-between;

		.right {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
	}

	.search-box {
		position: sticky;
		top: 0;
		z-index: 99;
	}
</style>